<style>
  .el-tabs__item {
    font-size: 20px;
    font-weight: 800;
    color: #000;
  }
  .el-tabs--border-card {
    box-shadow: 0 0 0 0 !important;
  }
</style>
<template>
  <div style="background-color: rgba(0,0,0,.0012)">
    <!--介绍-->
    <div style="text-align: center;padding-bottom: 36px;">
      <h2 style="font-size: 50px;color: #e9b722;margin: 0 0 8px;">金融科技，让贴现更简捷</h2>
      <p style="font-size: 25px;color: #fff;font-weight: 600;">三级分润，让赚钱更高效</p>
    </div>
    <!--流程-->
    <div class="add-flex">
      <!--<img src="../../assets/icon-laba.png" alt="">-->
      <svg-icon icon-class="laba" style="display: block;font-size: 22px;color: #e9b722;"/>
      <!--<div class="microsoft marquee">
        <span>欢迎来到享和票据平台，自贴返现，推广赚钱；实时推广，终身受益！</span>
      </div>-->
      <div class="marquee-outer-wrapper">
        <div class="marquee-inner-wrapper">
          <span class="first-marquee">欢迎来到享和票据平台，自贴返现，推广赚钱；实时推广，终身受益！</span>
          <span class="second-marquee">推广的下级达到奖励的档次，上级按推广级别比例奖励</span>
        </div>
      </div>
    </div>
    <div class="filter-container">
      <!--操作流程-->
      <div class="bord-bef">
        <span class="span">操作指引</span>
      </div>
      <div style="padding: 25px 35px;text-align: center;">
        <el-row :gutter="40" v-if=" status != '0' ">
          <el-col :span="6">
            <router-link to="/login/registeredUser">
              <div class="grid-content bg-purple" style="background-color: #15BEC4">
                <div>
                  <svg-icon icon-class="peoples"></svg-icon>
                </div>
                <p>账户注册</p>
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link to="/company/company">
              <div class="grid-content bg-purple-light">
                <div>
                  <svg-icon icon-class="icon-web-qiye"></svg-icon>
                </div>
                <p>企业信息</p>
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="{ path: '/company/signing', query: { id: 1 }}">
              <div class="grid-content bg-purple" style="background-color: #15BEC4">
                <div>
                  <svg-icon icon-class="form"></svg-icon>
                </div>
                <p>银行签约</p>
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="{ path: '/company/signing', query: { id: 2 }}">
              <div class="grid-content bg-purple-light">
                <div>
                  <svg-icon icon-class="piaofang"></svg-icon>
                </div>
                <p>票据贴现</p>
              </div>
            </router-link>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around" v-else>
          <el-col :span="6">
            <router-link to="/company/company">
              <div class="grid-content bg-purple-light">
                <div>
                  <svg-icon icon-class="icon-web-qiye"></svg-icon>
                </div>
                <p>企业信息</p>
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="{ path: '/company/signing', query: { id: 1 }}">
              <div class="grid-content bg-purple" style="background-color: #15BEC4">
                <div>
                  <svg-icon icon-class="form"></svg-icon>
                </div>
                <p>银行签约</p>
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="{ path: '/company/signing', query: { id: 2 }}">
              <div class="grid-content bg-purple-light">
                <div>
                  <svg-icon icon-class="piaofang"></svg-icon>
                </div>
                <p>票据贴现</p>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </div>

      <!--标准贴现-->
      <div class="bord-bef">
        <span class="span">标准分润</span>
      </div>
      <div class="commission-but">
        <el-tabs type="border-card" style="width: 100%; height: 260px;">
          <el-tab-pane label="富民银行">
            <el-table :data="tableData" border fit highlight-current-row :header-cell-style="{background:'#F2F2F2',color:'#666'}">
              <el-table-column align="center" min-width="120" label="推广级别" prop="level">
                <template slot-scope="scope">
                  {{{ "0":"直接贴现返佣", "1":"一级推广返佣", "2":"二级推广返佣"}[ scope.row.level ]}}
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="140" label="返佣" prop="perBP">
                <template slot-scope="scope">
                  <span style="font-size: 20px;color: red;font-weight: 700;">{{ scope.row.perBP }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="振兴银行">
            <div style="color: red">
              <span>玩命开发中！</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="网商银行">
            <div style="color: red">
              <span>玩命开发中！</span>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div style="padding-top: 15px;text-align: right">
          BP为万分单位
        </div>
      </div>

      <!--富民银行额外奖励-->
      <div class="bord-bef">
        <span class="span">额外奖励</span>
      </div>
      <div class="commission-but">
        <el-tabs type="border-card" style="width: 100%; height: 260px;">
          <el-tab-pane label="富民银行">
            <el-table :data="rewardList" border fit highlight-current-row :header-cell-style="{background:'#F2F2F2',color:'#666'}">
              <el-table-column align="center" min-width="120" label="档次" prop="level">
                <template slot-scope="scope">
                  {{{ "1":"第一档", "2":"第二档","3":"第三档" }[ scope.row.level ]}}
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="140" label="奖励">
                <template slot-scope="scope">
                  <div style="text-align: left">
                    自身及二级推广总公司达到
                    <span style="font-size: 16px;color: red;font-weight: 700;">{{ scope.row.perBP.households }}</span>,
                    并且季度日均贴现总额达到
                    <span style="font-size: 16px;color: red;font-weight: 700;">{{ scope.row.perBP.Money }}</span>,
                    奖励
                    <span style="font-size: 16px;color: red;font-weight: 700;">{{ scope.row.perBP.rewards }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="振兴银行">
            <div style="color: red">
              <span>玩命开发中！</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="网商银行">
            <div style="color: red">
              <span>玩命开发中！</span>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--<div style="padding-top: 15px">
          <img src="../../assets/icon-laba.png" alt="">
          <span style="padding-left: 10px;color: #333">推广的下级达到奖励的档次，上级按推广级别比例奖励</span>
        </div>-->
      </div>

      <!--网商银行首贴奖励-->
      <div class="bord-bef">
        <span class="span">网商银行首贴奖励</span>
      </div>
      <div class="reward-div" style="display: flex;font-weight: 700;padding-bottom: 40px;">
        <div style="width: 50%;padding: 0 60px;">
          <div style="font-stretch: normal;padding: 0 20px 10px;">
            用支付宝扫描右方二维码注册为网商银行网银贴现用户，并完成首贴(
            <span style="color: #FF8200;font-weight: 700;">金额不限</span>)，奖励
            <span style="color: #FF8200;font-size: 28px;font-weight: 700;">320</span>元
          </div>
        </div>
        <div style="width: 50%;text-align: center">
          <div class="qr-div">
            <img src="../../assets/tuiguangma.png" alt="">
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'realcheck',
  filters: { },
  components: {
    Pagination
  },
  computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar',
      'avatar',
      "name",
      "perms",
      "news",
      'fullName',
      'status'
    ]),
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  data() {
    return {
      tableData: [{
        level: '0',
        perBP: '2.1BP'
      }, {
        level: '1',
        perBP: '0.4BP'
      }, {
        level: '2',
        perBP: '0.2BP'
      }],
      list: [{
        level: '0',
        perBP: '2BP'
      }, {
        level: '1',
        perBP: '0.12BP'
      }, {
        level: '2',
        perBP: '0.08BP'
      }],
      rewardList: [{
        level: '1',
        perBP: {
          Money: '3000万',
          households: '500户',
          rewards: '0.7BP'
        }
      }, {
        level: '2',
        perBP: {
          Money: '1亿',
          households: '1000户',
          rewards: '1.4BP'
        }
      }, {
        level: '3',
        perBP: {
          Money: '2亿',
          households: '2000户',
          rewards: '1.75BP'
        }
      }],
      total1: 0,
      userInfo: {
        userName: undefined,
        mobile: undefined,
        timeLastLogin: undefined,
        lastLoginIP: undefined,
        timeAdd: undefined,
        isChecked: undefined,
        realName: undefined,
        account: undefined,
        bankCode: undefined,
        commTotal: undefined,
        commission: undefined,
        expend1: undefined,
        expend2: undefined,
        expend3: undefined,
        extendCode: undefined,
        serverName: undefined
      },
      listLoading: true,
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .marquee-outer-wrapper{
    overflow: hidden;
    width: 100%;
    background: #FFFBE8;
  }
  .marquee-inner-wrapper{
    color: #EE771F;
    margin: 0 auto;
    white-space: nowrap;
    position: relative;
  }
  /* 需要将两个文字内容一样的span放在最右边 */
  .marquee-inner-wrapper span{
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
  }
  /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
  .first-marquee{
    -webkit-animation: 35s first-marquee linear infinite normal;
    animation: 35s first-marquee linear infinite normal;
    padding-right: 100%;
  }
  @keyframes first-marquee {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    /* 向左移动 */
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      display: none;
    }
  }
  .second-marquee{
    /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
    -webkit-animation: 25s first-marquee linear 18s infinite normal;
    animation: 35s first-marquee linear 18s infinite normal;
    padding-right: 100%;
  }
  @keyframes second-marquee {
    0% {
      -webkit-transform: translate3d(0%, 0, 0);
      transform: translate3d(0%, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-200%, 0, 0);
      transform: translate3d(-200%, 0, 0);
      display: none;
    }
  }
  .add-flex {
    max-width: 1200px;
    margin: 0 auto;
    line-height: 25px;
    display: flex;
    position: relative;
    background: #FFFBE8;
    .marquee {
      width: 1200px;
      color: #fff;
      font-size: 16px;
      /*margin: 0 auto;*/
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      -webkit-animation: 1s marquee linear infinite normal;
      animation: marquee 30s linear infinite;
      .svg-icon {
        position: absolute;
      }
    }
    .marquee:hover {
      animation-play-state: paused
    }
    @keyframes marquee {
      0%   { text-indent: 50em }
      100% { text-indent: -10em }
    }
  }
  .bord-bef {
    text-align: center;
    padding: 63px 0 17px;;
    .span {
      font-size: 36px;
      position: relative;
    }
  }
  .grid-content {
    width: 252px;
    height: 260px;
    color: #fff;
    background-color: #30BCF7;
    transition: .3s;
    &:hover {
      transform: translateY(-8px);
      box-shadow: 10px 10px 20px 0 rgba(0,0,0,.3);
    }
    div {
      .svg-icon {
        width: 5rem;
        height:10rem;
      }
    }
    p {
      margin: 0;
      padding: 20px 0;
      font-size: 24px;
    }
  }
  .commission-but {
    padding: 25px 35px;
  }
  .reward-div {
    padding: 20px;
    background-color: #fff;
    font-weight: 700;
  }
  .qr-div {
    text-align: center;
    img {
      width:220px;
      height:220px;
    }
  }
</style>
